<!--
 * @Descripttion: 仪表盘
 * @version: V1.0
 * @Author: GaoWei
 * @Date: 2021-06-11 18:06:42
 * @LastEditors: GW
 * @LastEditTime: 2021-11-04 14:13:39
-->
<template>
    <nly-content-wrapper style="padding-top:55px;height: calc(100% - 80px);overflow-y: auto;">
        <!-- <div class="gutter-example">
            <a-row>
                <a-col class="gutter-row" v-for="item in headerData" :span="6">
                    <div class="gutter-box">
                        col-6
                    </div>
                </a-col>
            </a-row>
        </div> -->
        <a-row>
            <dnd-zone :transition-duration="0.3" @move="dd" :validate="validate">
                <dnd-container :dnd-model="box" dnd-id="grid-example">
                    <dnd-item v-for="(b,index) in box" :key="b.id" :dnd-id="b.id" :dnd-model="b">
                        <a-col class="gutter-row" :xxl="6" :xl="6" :lg="12" :md="12" :sm="12" :xs="12">
                            <div class="gutter-box-g" :style="{'background':b.background}">
                                <div class="gut-number">
                                    {{b.text}}
                                </div>
                                <div class="gut-ico">
                                    <a-icon :type="b.icon" />
                                </div>
                                <div class="gut-bottom">
                                    {{b.remark}}
                                </div>
                            </div>
                        </a-col>
                    </dnd-item>
                </dnd-container>
            </dnd-zone>
        </a-row>

        <!-- <div class='color-wrap'>
            <div class="item" v-for="(color,index) in colorList" v-dragging="{ item: color, list: colorList, group: ' color' }" :key="index">{{color.text}}</div>
        </div> -->

    </nly-content-wrapper>
</template>

<script>

export default {
    data () {
        return {
            visible: false,
            confirmLoading: false,
            colorList: [{ text: 'Aquamarine' },
            { text: 'Hotpink' },
            { text: 'red' },
            { text: 'green' },
            { text: 'Blueviolet' },
            { text: 'Lightblue' },
            { text: 'Cornflowerblue' }, { text: 'blue' }, { text: 'yellow' }],
            box: [{
                text: '150',
                id: '1',
                background: '#17a2b8',
                icon: 'pie-chart',
                remark: '采购统计'
            }, {
                text: '12%',
                id: '2',
                background: '#28a745',
                icon: 'bar-chart',
                remark: '生产统计'
            }, {
                text: '678',
                id: '3',
                background: '#ffc107',
                icon: 'area-chart',
                remark: '财务统计'
            }, {
                text: '9935',
                id: '4',
                background: '#dc3545',
                icon: 'reddit',
                remark: '生产统计'
            }]
        }
    },
    mounted () {
        // this.$dragging.$on('dragged', ({ value }) => { console.log(value.item) });
        // console.log(value.list)
        // console.log(value.otherData)
        // this.$dragging.$on('dragend', () => { 123 })
    },
    methods: {
        handleShow () {
            this.visible = true;
        },
        handleOk () {
            this.handleCancel();
        },
        handleCancel () {
            this.visible = false;
        },
        dd (v) {
            console.log(v)
            console.log(this.box)
        },
        // validate (item, container, zone) {
        //     console.log(item.dndModel)
        // }
    }
};
</script> 

<style lang="less" >
    .workplace-title-box {
        position: relative;

        .workplace-title {
            text-align: center;
        }
        .workplace-btn {
            position: absolute;
            right: 10px;
            top: 0;
        }
    }

    .workplace-content {
        .item-box {
            padding: 10px;
            cursor: pointer;
            text-align: center;
        }
        .chart-icon {
            width: 100px;
        }
        .item-box:hover {
            color: #00a0e9;
        }
    }
    .col-item {
        background: #00a0e9;
        border-radius: 4px;
        height: 100px;
    }

    .gutter-row {
        height: 142px;
        background: #ffffff;
        padding: 5px;
    }
    .gutter-box-g {
        position: relative;
        text-align: center;
        height: 100%;
        margin: 0 auto;
        border-radius: 4px;
        .gut-number {
            position: absolute;
            left: 10px;
            top: 10px;
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
        }
        .gut-ico {
            position: absolute;
            right: 10px;
            font-size: 66px;
            color: #cccccc;
        }
        .gut-bottom {
            position: absolute;
            width: 100%;
            height: 32px;
            line-height: 32px;
            color: #ffffff;
            bottom: 0px;
            background: rgba(0, 0, 0, 0.2);
        }
    }
</style>
